  <template>
  <div>
    <div class="learing-list">
      <div class="list-box">
        <ul>
          <li>关键字：</li>
          <ol>
            <li>{{keyword}}

              <nuxt-link v-if="keyword" class="title-link"
                         :to="'/course/search?keyword=&mt='+mt+'&st=' + st+'&grade='+grade">
                &Chi;
              </nuxt-link>
            </li>
          </ol>
        </ul>
        <ul>
          <li>一级分类：</li>
          <li v-if="mt!=''">
            <nuxt-link class="title-link" :to="'/course/search?keyword='+keyword+'&grade='+grade">全部</nuxt-link>
          </li>
          <li class="all" v-else>全部</li>
          <ol>
            <li v-for="category_v in first_category">
              <nuxt-link class="title-link all" :to="'/course/search?keyword='+keyword+'&mt=' + category_v.id"
                         v-if="category_v.id == mt">{{category_v.name}}
              </nuxt-link>
              <nuxt-link class="title-link" :to="'/course/search?keyword='+keyword+'&mt=' + category_v.id" v-else>
                {{category_v.name}}
              </nuxt-link>
            </li>
          </ol>
        </ul>
        <ul>
          <li>二级分类：</li>
          <li v-if="st!=''">
            <nuxt-link class="title-link" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&grade='+grade">全部
            </nuxt-link>
          </li>
          <li class="all" v-else>全部</li>
          <ol v-if="second_category.length>0">
            <li v-for="category_v in second_category">
              <nuxt-link class="title-link all" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&st=' + category_v.id"
                         v-if="category_v.id == st">{{category_v.name}}
              </nuxt-link>
              <nuxt-link class="title-link" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&st=' + category_v.id"
                         v-else>{{category_v.name}}
              </nuxt-link>
            </li>
          </ol>
        </ul>
        <ul>
          <li>难度等级：</li>
          <li v-if="grade!=''">
            <nuxt-link class="title-link" :to="'/course/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade='">全部
            </nuxt-link>
          </li>
          <li class="all" v-else>全部</li>
          <ol>
            <li v-if="grade=='200001'" class="all">初级</li>
            <li v-else>
              <nuxt-link class="title-link"
                         :to="'/course/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade=200001'">初级
              </nuxt-link>
            </li>
            <li v-if="grade=='200002'" class="all">中级</li>
            <li v-else>
              <nuxt-link class="title-link"
                         :to="'/course/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade=200002'">中级
              </nuxt-link>
            </li>
            <li v-if="grade=='200003'" class="all">高级</li>
            <li v-else>
              <nuxt-link class="title-link"
                         :to="'/course/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade=200003'">高级
              </nuxt-link>
            </li>
          </ol>
        </ul>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-9 list-row-left">
          <div class="list-cont-left">
            <div class="tit">
              <ul class="nav nav-tabs ">
              </ul>
            </div>
            <div class="tab-content">
              <div class="content-list">
                <div class="recom-item" v-for="(course, index) in courselist">
                  <a :href="'/course/detail/'+course.id+'.html'" target="_blank">
                    <div v-if="course.pic">
                      <p><img :src="imgUrl+'/'+course.pic" width="100%" alt=""></p>
                    </div>
                    <div v-else>
                      <p><img src="/img/widget-demo1.png" width="100%" alt=""></p>
                    </div>
                    <ul>
                      <li class="course_title">{{course.name}}</li>
                      <li style="float: left"><span v-if="course.charge == '203001'">免费</span><span
                        v-if="course.charge == '203002'">￥{{course.price | money}}</span>
                      </li>
                    </ul>
                  </a>
                </div>

                <li class="clearfix"></li>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>

          <div style="text-align: center">
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :total="total"
              :page-size="page_size"
              prev-text="上一页"
              next-text="下一页">
            </el-pagination>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
    //配置文件
    let config = require('~/config/sysConfig');
    import querystring from 'querystring'
    import * as courseApi from '~/api/course'

    export default {
        head() {
            return {
                title: '从零开始-专注基础教学',
                meta: [
                    {charset: 'utf-8'},
                    {name: 'description', content: '从零开始专注基础教学，一站式服务。'},
                    {name: 'keywords', content: this.keywords}
                ],
                link: [
                    {rel: 'stylesheet', href: '/static/plugins/normalize-css/normalize.css'},
                    {rel: 'stylesheet', href: '/static/plugins/bootstrap/dist/css/bootstrap.css'},
                    {rel: 'stylesheet', href: '/static/css/page-learing-list.css'}
                ]
            }
        },

        //在组件加载之前调用，有利于SEO
        async asyncData({store, route}) {
            console.log(route.query);

            let page = route.query.page;
            if (!page) {
                page = 1;
            }
            console.log("page=" + page);
            //使用async和await关键字实现同步调用搜索课程，首次搜索，参数只有关键字
            let course_data = await courseApi.search_course(page, 12, route.query)
            console.log(course_data);
            //查询分类
            let category_data = await courseApi.sysres_category();

            if (course_data && course_data.queryResult && category_data) {
                //全部分类
                let category = category_data.category;
                //获取一级大分类
                let first_category = category[0].children;
                //二级分类
                let second_category = [];
                let keywords = '';
                let mt = '';
                let st = '';
                let grade = '';
                let keyword = '';
                //获取总记录数
                let total = course_data.queryResult.total;
                console.log(total);
                //获取大等级、小等级、关键字等参数，用于回显
                if (route.query.mt) {
                    mt = route.query.mt
                }
                if (route.query.st) {
                    st = route.query.st
                }
                if (route.query.grade) {
                    grade = route.query.grade
                }
                if (route.query.keyword) {
                    keyword = route.query.keyword
                }
                //遍历一级分类
                for (var i in first_category) {
                    keywords += first_category[i].name + ' ';
                    //一级分类id等于大分类
                    if (mt != '' && mt == first_category[i].id) {
                        //取出二级分类
                        second_category = first_category[i].children;
                        console.log(second_category);
                        break;
                    }
                }
                console.log(category[0].children)
                return {
                    courselist: course_data.queryResult.list,
                    keywords: keywords,
                    first_category: first_category,
                    second_category: second_category,
                    mt: mt,
                    st: st,
                    grade: grade,
                    keyword: keyword,
                    total: total,
                    imgUrl: config.imgUrl
                }
            } else {
                return {
                    courselist: {},
                    first_category: {},
                    second_category: {},
                    mt: '',
                    st: '',
                    grade: '',
                    keyword: '',
                    total: 0,
                    imgUrl: config.imgUrl
                }
            }

        },
        //自定义过虑器
        filters: {
            money: function (value) {
                return Math.floor(value);
            }
        },
        data() {
            return {
                total: 0,//总记录数
                page: 1,//页码
                page_size: 5,//每页显示个数
                keywords: '' //head中的关键字
            };
        },
        watch: {//路由发生变化立即搜索search表示search方法
            '$route': 'search'
        },
        methods: {
            //分页触发
            handleCurrentChange(page) {
                this.page = page;
                let query = Object.assign({}, this.$route.query);
                query.page = page;
                let querys = querystring.stringify(query);
                console.log(querys);
                this.$router.push(`/course/search?` + querys)
            },
            //搜索方法
            search() {
                console.log("search....");
                console.log(this.$route.query);
                // 获取搜索分类
                courseApi.sysres_category().then((category_data) => {
                    let category = category_data.category;
                    let first_category = category[0].children;
                    let second_category = [];
                    let mt = '';
                    let st = '';
                    let grade = '';
                    let keyword = '';

                    if (this.$route.query.mt) {
                        mt = this.$route.query.mt
                    }
                    if (this.$route.query.st) {
                        st = this.$route.query.st
                    }
                    if (this.$route.query.grade) {
                        grade = this.$route.query.grade
                    }
                    if (this.$route.query.keyword) {
                        keyword = this.$route.query.keyword
                    }
                    if (mt != '') {
                        //取出二级分类
                        for (var i in first_category) {
                            if (mt == first_category[i].id) {
                                second_category = first_category[i].children;
                                // console.log(second_category)
                                break;
                            }
                        }
                    }
                    this.first_category = first_category;
                    this.second_category = second_category;
                    this.mt = mt;
                    this.st = st;
                    this.grade = grade;
                    this.keyword = keyword;

                });
                //调用搜索课程接口
                courseApi.search_course(this.page, this.page_size, this.$route.query).then((course_data) => {
                    this.courselist = course_data.queryResult.list;
                    this.total = course_data.queryResult.total;
                    console.log(this.total)
                })
            }
        },
        mounted() {
            this.search()
        }
    }
</script>
<style>

  .eslight {
    color: #FF0000;
  }

  a {
    color: #000;
  }

  .el-icon-arrow-left:before {
    content: "<";
  }

  .el-icon-d-arrow-left:before {
    content: "...";
  }

  .el-icon-arrow-right:before {
    content: ">";
  }

  .el-icon-d-arrow-right:before {
    content: "...";
  }

  .el-icon-more:before {
    content: "...";
  }

  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    background-color: #fff;
  }

  .course_title {
    height: 20px;
    width: 160px;
    overflow: hidden;
  }

</style>
